<template>
  <video-cover 
    v-for="item in list" 
    :key="item.bvid"
    :danmaku="item.video_review"
    :durtaion="item.length"    
    direction="horizontal"
    v-bind="item"
    author=""
  ></video-cover>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'
import VideoCover from '@/components/VideoCover'
import { spaceApi } from '@/api'
export default {
  name: 'SpaceVideos',
  components: {
    VideoCover
  },
  props: {
    mid: {
      type: [Number, String]
    }
  },  
  setup(props) {
    const params = reactive({
      list: []
    })
    const getData = async () => {
      try {
        const { data } = await spaceApi.getUserVideos({
          mid: props.mid
        })
        if (data) {
          params.list = data.list.vlist          
        }
      } catch (error) {    
        console.log(error)        
      }
    }

    watch(() => props.mid, () => {
      params.list.splice(0, params.list.length)
      getData()
    }, {
      immediate: true
    })

    return {
      ...toRefs(params)
    }
  }
}
</script>

<style>

</style>